<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('首页报表')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-6">
				 <div class="ibox">
                    <div class="ibox-content">
                        <h5 class="m-b-md">淘宝上月环比</h5>
                        <h2 class="" id="taobao">
                                    <i id="taobaoPercent" class="fa fa-play"></i><span id="taobaoLabel"></span>
                                </h2>
                        <small>本月截止当天与上月截止同一日期的数据环比</small>
                    </div>
                </div>
			</div>
			<div class="col-sm-6">
				<div class="ibox">
                    <div class="ibox-content">
                        <h5 class="m-b-md">拼多多上月环比</h5>
                        <h2 id="pingDuoduo" class="">
                                    <i id="pingDuoduoPercent" class="fa fa-play"></i><span id="pingDuoduoLabel"></span>
                                </h2>
                        <small>本月截止当天与上月截止同一日期的数据环比</small>
                    </div>
                </div>
			</div>
		</div>
		<div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>本年度科目</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="keMuCharts"></div>
                    </div>
                </div>
            </div>
        </div>
 		<div class="row">
        	 <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>本年度总表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="yearCharts"></div>
                    </div>
                </div>
            </div>
        </div>
  </div>
  <th:block th:include="include :: footer" />
  <th:block th:include="include :: echarts-js" />
  <script type="text/javascript">
  function showHuanbi(id,percent){
	  console.log(id+":"+percent);
	  var p = $("#"+id+"Percent");
	  var l = $("#"+id+"Label");
	  var m = $("#"+id);
	  if(percent>0){
		  p.addClass("fa-rotate-270");
		  m.addClass("text-danger");
	  }else if(percent==0){
		  
	  }else{
		  p.addClass("fa-rotate-90");
		  m.addClass("text-navy");
	  }
	  l.html(percent+"%");
  }
  $(function () {
	  
	  var yearCharts = echarts.init(document.getElementById("yearCharts"));
	  var keMuCharts = echarts.init(document.getElementById("keMuCharts"));
	  yearCharts.showLoading();
	  keMuCharts.showLoading();
	  var prefix = ctx + "system/info";
	  $.ajax({
		  url:prefix+'/selectHuanbiReport?'+(new Date()).getTime(),
          type:'post',
          async: true,
          dataType:'json',
          success:function (result) {
        	  var pingDuouo = parseFloat(result[0].percent);
        	  var taobao =  parseFloat(result[1].percent);
        	  showHuanbi("pingDuoduo",pingDuouo);
        	  showHuanbi("taobao",taobao);
          }
	  });
	  $.ajax({
		  url:prefix+'/selectYearReport?'+(new Date()).getTime(),
          type:'post',
          async: true,
          dataType:'json',
          success:function (result) {
        	  yearCharts.hideLoading();
        	  yearCharts.setOption({
  	          tooltip : {
	                trigger: 'axis'
	            },
                  legend: {
                      data:['人数','金额']
                  },
                  calculable : true,
                  xAxis : [
  	                {
  	                    type : 'category',
  	                    data :result.legend
  	                }
  	            ],
  	            yAxis : [
  	                {
  	                    type : 'value'
  	                }
  	            ],
                  series : [
                      {
                    	  name:'人数',
  	                      type:'bar',
                          data:result.data,
                          markPoint : {
  	                        data : [
  	                            {type : 'max', name: '最大值'},
  	                            {type : 'min', name: '最小值'}
  	                        ]
	  	                    },
	  	                    markLine : {
	  	                        data : [
	  	                            {type : 'average', name: '平均值'}
	  	                        ]
	  	                    }
                      },
                      {
                    	  name:'金额',
  	                      type:'line',
                          data:result.data2,
                          markPoint : {
  	                        data : [
  	                            {type : 'max', name: '最大值'},
  	                            {type : 'min', name: '最小值'}
  	                        ]
	  	                    },
	  	                    markLine : {
	  	                        data : [
	  	                            {type : 'average', name: '平均值'}
	  	                        ]
	  	                    }
                      }
                  ]
        	  }); 
          }
	  });
	  $.ajax({
		  url:prefix+'/selectKemuReport?'+(new Date()).getTime(),
          type:'post',
          async: true,
          dataType:'json',
          success:function (result) {
        	  keMuCharts.hideLoading();
        	  keMuCharts.setOption({
  	          tooltip : {
	                trigger: 'axis'
	            },
                  legend: {
                      data:result.legend
                  },
                  calculable : true,
                  grid:{
  	                x:45,
  	                x2:40,
  	                y2:24
  	            },
                  xAxis : [
  	                {
  	                    type : 'category',
  	                    data :['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  	                }
  	            ],
  	            yAxis : [
  	                {
  	                    type : 'value'
  	                }
  	            ],
                  series : [
                      {
                    	  name:'淘宝',
  	                      type:'bar',
                          data:result.data,
                          markPoint : {
  	                        data : [
  	                            {type : 'max', name: '最大值'},
  	                            {type : 'min', name: '最小值'}
  	                        ]
	  	                    },
	  	                    markLine : {
	  	                        data : [
	  	                            {type : 'average', name: '平均值'}
	  	                        ]
	  	                    }
                      },{
                    	  name:'拼多多',
  	                      type:'bar',
                          data:result.data2,
                          markPoint : {
  	                        data : [
  	                            {type : 'max', name: '最大值'},
  	                            {type : 'min', name: '最小值'}
  	                        ]
	  	                    },
	  	                    markLine : {
	  	                        data : [
	  	                            {type : 'average', name: '平均值'}
	  	                        ]
	  	                    }
                      }
                  ]
        	  }); 
          }
	  });
	        window.onresize = yearCharts.resize;
	        window.onresize =keMuCharts.resize;
  });
  </script>
</body>
</html>